<template>
    <view class="mask kefu-box" @click="cancel">
        <view class="box bgwhite flex-box">
            <view @click="call" class="flex">
                <view class="flex-box align-center flex-center">
                    <image class="Icon" :src="staticUrl+'/images/jh_up/icon-hotline.png'" mode="aspectFit"></image>
                    <text class="size28 bold">热线客服</text>
                </view>
            </view>
            <view class="flex">
                <view @click="contact" class="flex-box align-center flex-center">
                    <image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
                    <text class="size28 bold">在线客服</text>
                </view>
                <!-- #ifdef MP-WEIXIN -->
                <button open-type="contact" class="btn-contact" v-if='startUp.service_state != 1'></button>
                <!-- #endif -->
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            staticUrl: this.staticUrl
        }
    },
    computed: {
        ...mapState(['vid', 'startUp'])
    },
    methods: {
        cancel(){
            this.$emit('cancelFunc') // 点击遮罩隐藏组件
        },
        contact(){		
            if (this.vid) {
                if(this.startUp.service_state == 1){ // 客服系统
                    uni.navigateTo({
                        url: "/userPage/message/consult"
                    })
                }else{
                    this.call()
                }
            } else {
                // this.$Toast('请先登录/注册')
                this.$emit('openModal') // 触发授权登录
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.kefu-box{
	overflow-y: auto;
	padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
    .box{
        padding: 30rpx;
        z-index: 3;
        width: 100%;
        position: fixed;
        width: calc(100% - 60rpx);
        border-radius: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        @keyframes bottom {
            0% {bottom: -200rpx;}
            100% {
                bottom: calc(130rpx + constant(safe-area-inset-bottom));
                bottom: calc(130rpx + env(safe-area-inset-bottom));
            }
        }
        animation: bottom .2s ease-in-out forwards;
        >view{
            position: relative;
            &:nth-child(2){
                border-left: 2rpx solid #000;
            }
            .Icon{
                width: 42rpx;
                height: 42rpx;
                margin-right: 10rpx;
            }		
        }
    }
}
</style>